<template>
  <div class="i-menu">
    <div
      class="i-menu-item"
      v-for="(item, index) in category"
      :key="item.title"
      @click="handleChange(index, item.maitKey)"
    >
      <span :class="index === currentIndex ? 'active' : ''">
        {{ item.title }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    category: Array
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    handleChange(index, maitKey) {
      this.currentIndex = index
      this.$emit('change', maitKey)
    }
  }
}
</script>

<style lang="less" scoped>
.i-menu {
  width: 100px;
  .i-menu-item {
    height: 35px;
    background: white;
    text-align: center;
    font-size: 13px;
    span {
      padding: 5px 10px;
      display: inline-block;
      min-width: 60px;
    }
    .active {
      color: white;
      border-radius: 10px;
      background: linear-gradient(to right, #00d7c1, #02bcc0);
    }
  }
}
</style>
